<template>
  <div class="studen_container">
    <!-- 输入搜索框 -->
    <div class="search_container">
      <div>
        学员状态
        <el-input v-model="value" placeholder="请选择"></el-input>
      </div>
      <div>
        学生名称
        <el-input v-model="name" placeholder="请输入学生关键字"></el-input>
      </div>
      <div>
        手机号
        <el-input v-model="phone" placeholder="请输入手机号"></el-input>
      </div>
      <el-button type="reset" icon="el-icon-search" @click="onSearch">搜索</el-button>
      <el-button type="resset" icon="el-icon-delete" @click="onReset">重置</el-button>
    </div>
    <!-- 按钮框 -->
    <div class="button_container">
      <el-button type="primary">新增学员</el-button>
      <el-button type="primary">批量导入</el-button>
      <el-button type="primary">批量导出</el-button>
      <el-button type="primary">查看报表</el-button>
    </div>
    <!-- 学生数据渲染 -->
    <div class="student_table_container">
      <el-table style="width: 100%" :stripe="true" :data="tableData">
        <el-table-column type="selection">
          <template slot-scope></template>
        </el-table-column>
        <el-table-column label="学生名称">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" alt />
            <span>{{scope.row.nickname}}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="mobile"></el-table-column>
        <el-table-column label="状态" prop="status"></el-table-column>
        <el-table-column label="创建时间" prop="time"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope>
            <a href>详情-编辑-禁用-删除-重置密码</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      phone: "",
      value: "",
      tableData: [],
      tempData: [],
      name: ""
    };
  },
  methods: {
    onSearch() {
      this.tableData = [];
    //   console.log(this.tempData)
      if (this.name.length != 0) {
        this.tempData.forEach(element => {
          if (element.nickname === this.name) {
            console.log(this.name);
            this.tableData.push(element);
          }
        });
      }

      if (this.phone.length != 0) {
        this.tempData.forEach(element => {
          if (element.mobile === this.phone) {
            this.tableData.push(element);
          }
        });
      }
    },
    onReset() {
    //   console.log(this.tempData)
      
      this.tableData = this.tempData;
      this.value = "";
      this.name = "";
      this.input = "";
    }
  },
  mounted() {
    axios
      .get("http://localhost:8080/list.json")
      .then(res => {
        console.log(res.data);
        res.data.forEach(element => {
          var time = new Date(parseInt(element.created_at) * 1000);
          element.time = `${time.getFullYear()}年${time.getMonth()}月${time.getDay()}日`;
          element.status = element.status === 0 ? "禁用" : "启用";
        });
        this.tempData = res.data;
        this.tableData = res.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

<style scoped>
.studen_container {
  width: 100%;
}
.search_container {
  width: 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-content: center;
  /* height: 50px; */
  margin: 20px 0px;
}
.search_container div {
  width: 300px;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
}
.button_container {
  width: 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}
.student_table_container {
  width: 100%;
}
.student_table_container img {
  width: 30px;
}
a {
  text-decoration: none;
}
</style>